<template>
  <div class="dashboard-line-box">
    <div ref="echart" class="dashboard-line" />
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue'
// import 'echarts/theme/macarons'
const props = defineProps({
  totalList: Object,
})
// watch(() => props.totalList, (o, n) => {
//   name.value = []
//   series.value =
//     initChart()
// })

const name = ref([])
const series = ref([])
const echartFun = () => {
  props.totalList.map((item) => {
    item.name = item.name.replace(/ /g, '')
    name.value.push(item.name)
    series.value.push({
      name: item.name,
      type: 'line',
      // stack: 'Total',
      smooth: true,
      data: [0, 0, 0, 0]
    })
  })

  for (let i = 0; i < series.value.length; i++) {
    for (let j = 0; j < props.totalList[i].children.length; j++) {
      props.totalList[i].children[j].gameName = props.totalList[i].children[j].gameName.replace(/　/g, '')
      //alert(props.totalList[i].children[j].gameName + "=>" + series[i].name)
      if (props.totalList[i].children[j].gameName == series.value[i].name) {
        switch (props.totalList[i].children[j].typeDownst) {
          case 0:
            series.value[i].data[0] = props.totalList[i].children[j].nums
            break;
          case 1:
            series.value[i].data[1] = props.totalList[i].children[j].nums
            break;
          case 2:
            series.value[i].data[2] = props.totalList[i].children[j].nums
            break;
          case 3:
            series.value[i].data[3] = props.totalList[i].children[j].nums
            break;
          default:

        }




      }

    }
  }
}

echartFun()
let option = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: name.value
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ["启动次数", "下载游戏次数", "进入游戏次数", "直播间进入次数"]
  },
  yAxis: {
    type: 'value'
  },
  series: series.value
};

const chart = shallowRef(null)
const echart = ref(null)
const initChart = () => {
  chart.value = echarts.init(echart.value /* 'macarons' */)
  setOptions()
}
const setOptions = () => {
  chart.value.setOption(option)
}

onMounted(async () => {
  await nextTick()
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
</script>
<style lang="scss" scoped>
.dashboard-line-box {
  .dashboard-line {
    background-color: #fff;
    height: 360px;
    width: 100%;
  }

  .dashboard-line-title {
    font-weight: 600;
    margin-bottom: 12px;
  }
}
</style>
